Intro

Make your web app easy to navigate

Accordions are helpful for things like a Q&A where you might not want to show the answer to every question. It makes the questions stand out, and if a user clicks a question to learn more, the accordion reveals that information. It’s a great way to reduce elements on your site. It works wonders for users’ cognitive load.
Try the demo below.

Demo

Accordion A
Accordion B
Accordion C

Components

  • accordion

    An expandable panel. You can set the heading with an attribute, or overwrite the content with the slot named "heading".

    Example
    It looks like this. Pretty neat right?

  • accordion-group

    All `ui-accordion` must be a child of an `ui-accordion-group`. Only one accordion can be opened per group.

Style variables

--heading-color#E5E5E5
--heading-background-color
#262626
--content-background-color
#262626
--transition-duration
300ms
--transition-timing-function
ease